	
<template>
	<!-- 全部分类组件 -->
	<view class="category-box">
		<!-- slice(0,7) 0是下表  获取到第几位 7  第七位不获取 只获取到第六位   slice （开始下标,结束下标）-->
		<!-- silce  截取  数组前七位  -->
		<view v-for="(item,index)  in categoryList.slice(0,7) " :key = "index"
		@click="toPageSearch(item.id,item.name,index)">{{item.name}}</view>
		<view @click="toPageSearch(null,'全部分类',-1)">全部分类</view>
		
	</view>
</template>

	
<script>
	export default {
		props:{

			categoryList:{
				type:Array,
				default:()=>[
					{
						id:1,
						name:'前端'
					},
					{
						id:2,
						name:'运维'
					},
					{
						id:3,
						name:'设计'
					},
					{
						id:4,
						name:'PHP'
					},
					{
						id:5,
						name:'java'
					},
					{
						id:6,
						name:'大数据'
					},
					{
						id:7,
						name:'python'
					},
					{
						id:8,
						name:'UI'
					},
				]
			}
		},
		methods:{
			toPageSearch(id,name,index){
				//点击跳转到search 页面
				const  params = {categoryId:id,name:name,activeIndex:index}
				this.navTo(`/pages/search/search?params=${JSON.stringify(params)}`)
			}
		}
	}
	
</script>

<style lang="scss">
	.category-box{
		display: flex;
		//space-around 自动对齐
		justify-content: space-around;
		//不行显示不下 ,自动换行
		flex-wrap: wrap;
		padding: 20rpx 30rpx 0  30rpx;
		>view {
			width:160rpx;
			height: 70rpx;
			background-color: #F8F9FB;
			text-align: center;
			line-height: 70rpx;
			font-size: 26rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 15rpx;
			
		}
	}
</style>
